<template>
	<div class="m-page-main" style="height: auto">
		<Upload class="upload-demo" :action="upload_url" :on-success="handleAvatarSuccess" list-type="picture" accept="image/*">
			<el-button size="small" type="primary">上传文件</el-button>
		</Upload>
		<ul class="car-list">
			<li v-for="car in list" :key="car.id">
				<!--<img :src="car.logoimage" class="car-list-img" />-->
				<div class="car-list-title">{{ car.filename }}</div>
				<div class="car-list-id">文件大小: {{ car.filesize }}kb</div>
				<div class="car-list-id">上传时间: {{ car.createtime }}</div>
				<div class="car-list-more" @click="catMore(car.file)">查看详情>>></div>
			</li>
		</ul>
		<Pagination class="mu-page" :hide-on-single-page="true" background layout="prev, pager, next" :total="total"  @current-change="currentChange"></Pagination>
	</div>
</template>
<script>
import { Pagination, Upload } from 'element-ui';
import { cmsuploadfilesave, cmsuploadfilelist } from '@/api';
import { UPLOAD_URL } from '@/api/common'

export default {
	components: {
		Pagination,
		Upload
	},
	data() {
		return {
			upload_url: UPLOAD_URL,
			page: 1,
			limit: 10,
			total: 0,
			list: [],
			fileinfo: {
				name: '',
				size: '',
				url: '',
				type: 1
			},
			fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
		};
	},
	created() {
		this.getList();
	},
	methods: {
		currentChange (index) {
			this.page = index
			this.getList()
		},
		getList() {
			cmsuploadfilelist({
				type: 1,
				page: this.page,
				limit: this.limit
			}).then(res => {
				console.log(res);
				this.list = res.data.data.rows;
				this.total = res.data.data.total;
			});
		},
		handleAvatarSuccess(res, file) {
			this.fileinfo.name = file.name;
			this.fileinfo.size = file.size;
			this.fileinfo.url = res.data.fullurl;
			cmsuploadfilesave(this.fileinfo).then(res => {
				//console.log(res);
				this.getList();
			});
		},
		catMore (src) {
			this.$viewerApi({
				images: [src]
			})
		}
	}
};
</script>
<style scoped>
.m-page-main {
	width: 995px;
	float: right;
	margin-right: 2px;
}

.car-list {
	margin-top: 20px;
	border-radius: 10px;
}
.car-list li {
	color: #7d7d7d;
	font-size: 18px;
	background-color: rgb(255, 255, 255);
	box-shadow: 2.5px 4.33px 10px 0px rgb(0, 0, 0, 0.2);
	padding: 25px 30px 25px;
	border-bottom: 1px solid #ddd;
	display: flex;
	align-items: center;
}
.car-list li:nth-child(1) {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.car-list li:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.car-list li img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	margin-right: 10px;
}
.car-list-title,
.car-list-id {
	flex: 1;
}
.car-list-id {
	font-size: 14px;
	color: #535353;
}
.car-list-more {
	font-size: 14px;
	color: #3f87f5;
}
.car-list-title {
	color: #313131;
}
.title span {
	font-size: 16px;
	color: #7d7d7d;
	float: right;
}
.meta {
	line-height: 40px;
}
.mu-page {
	padding: 20px 0;
}
</style>
